
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <link rel="stylesheet" type="text/css" href="/public/static/index/css/shop.css"/>
    <link rel="stylesheet" type="text/css" href="/public/static/index/css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="/public/static/index/css/goods.css"/>

    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1646840_lskp4ol16mr.css"/>

    <link rel="stylesheet" type="text/css" href="/public/static/index/layui/css/layui.css"/>


    <script src="/public/static/index/js/jquery-3.4.1.min.js"></script>

    <script src="/public/static/index/js/common.js"></script>

    <script src="/public/static/index/layui/layui.js"></script>
    <script src="/public/static/index/js/swiper.min.js"></script>

    <title>商品详情</title>

    <meta name="keywords" content="商品详情">

    <meta name="description" content="商品详情">



</head>

<body>




<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1646840_wwuv2y1aefe.css"/>
<div class="top">

    <div class="wrap top_box">

        <div class="top_left">
                        <a href="/index/user/login.html">登录</a>
            <a href="/index/user/register.html">注册</a>
                       
        </div>

        <div class="top_right">

            <a href="/index/">首页</a>

            <a href="/index/user/index.html">会员中心</a>
            <a href="/index/user/notice.html">通知消息</a>

            <a href="#">联系客服</a>

            <a href="#" class="cart"><i class="icongouwuche iconfont"></i> 购物车( 5 )</a>

        </div>

    </div>

</div>





<div class="header" >

    <div class="wrap header_box">

        <div class="logo"><a href="/"><img src="/public/static/index/images/shop_logo.jpg"></a></div>
        <div class="nav">
            <div class="item"><a href="/">首页</a></div>
            <div class="item"><a href="/shop/lists/index.html?id=1">手机</a></div>
            <div class="item"><a href="/shop/lists/index.html?id=1">电视</a></div>
            <div class="item"><a href="/shop/lists/index.html?id=1">女装</a></div>
            <div class="item"><a href="/shop/lists/index.html?id=1">当季流行</a></div>
        </div>

        <form class="search_box" method="post" action="/index/lists/search.html">

            <input type="text" placeholder="输入搜索关键字" name="keywords" class="input" autocomplete="off">

            <button type="submit" class="btn"><i class="icontubiao1 iconfont"></i></button>

            <div class="search_key_box">
                                <a href="/index/lists/search.html?keywords=%E5%B0%8F%E7%B1%B3" class="item">小米</a>
                                <a href="/index/lists/search.html?keywords=%E7%94%B5%E8%A7%86" class="item">电视</a>
                                <a href="/index/lists/search.html?keywords=%E6%AF%9B%E5%91%A2%E5%A4%A7%E8%A1%A3" class="item">毛呢大衣</a>
                                <a href="/index/lists/search.html?keywords=%E6%89%8B%E6%9C%BA" class="item">手机</a>
                                <a href="/index/lists/search.html?keywords=%E7%BE%BD%E7%BB%92%E6%9C%8D" class="item">羽绒服</a>
                            </div>

        </form>

    </div>

</div>



<div class="header_line"></div>

<div class="goods_position">
  <div class="wrap"><a href="/">首页</a> &gt;
        <a href="/index/lists/index.html?cate_id=14">手机 / 数码 / 电子办公 &gt; </a>
        <a href="/index/lists/index.html?cate_id=18">热门手机 &gt; </a>
        <a href="/index/lists/index.html?cate_id=16">小米 &gt; </a>
    </div>
</div>
<div class="wrap">


    <div class="goods1">

        <div class="goods1_left">

          <div class="swiper-container">
            <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="/public/upload/20200810/7c2921c04fda2943e8b4d41011ea99d1.jpg"></div>
                            <div class="swiper-slide"><img src="/public/upload/20200810/7e9ba4838998b81b1b8db30628ec0b7b.jpg"></div>
                            <div class="swiper-slide"><img src="/public/upload/20200810/6645cedc4b3209c22722f7296c310311.jpg"></div>
                            <div class="swiper-slide"><img src="/public/upload/20200810/9307a11a5f65ccda184792ff8ffc2834.jpg"></div>
                          </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
          <script>
            var swiper = new Swiper('.swiper-container', {
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
              loop:'true'
            });
          </script>

        </div>

        <div class="goods1_right">
            <div class="goods_name_box">
              <div class="goods_name">小米33</div>
              <div class="goods_click">点击:9</div>
            </div>
            <div class="goods_name1">「6GB+128GB到手价仅1399元；8GB+128GB到手价仅1599元；8GB+256GB到手价仅1799元」</div>
            <div class="goods_description">5000mAh长循环大电量 / 6.53&quot;超大护眼屏幕 / G25八核处理器 / 大音量扬声器 / 1300万 AI相机 / 人脸解锁 / 最高支持512GB存储扩展</div>
            <div class="goods_price_box">
              <div class="goods_price_box_left">
                <div class="goods_price1">秒杀价：￥<span class="goods_price1_text">1900</span></div>
                <div class="goods_price2">市场价：￥<span class="goods_price2_text">2100</span></div>
              </div>
              <div class="goods_price_box_right" onclick="collect()">
                                      <i class="layui-icon layui-icon-star" style="font-size:22px;"></i>
                                    
              </div>
            </div>
                        <div class="goods_attr">内存：</div>
            <div class="goods_attr_value_box">
                            <div class="item current">128G<input type="hidden" value="3"></div>
                            <div class="item ">64G<input type="hidden" value="2"></div>
                          </div>
                        <div class="goods_attr">颜色：</div>
            <div class="goods_attr_value_box">
                            <div class="item current">玫瑰粉<input type="hidden" value="6"></div>
                            <div class="item ">科技黑<input type="hidden" value="5"></div>
                          </div>
                        <div class="goods_attr">手机套餐：</div>
            <div class="goods_attr_value_box">
                            <div class="item current">标准套餐<input type="hidden" value="23"></div>
                          </div>
                        
            <div class="number_box"><input type="number" min="1" value="1" class="number_input"></div>
            
            <div class="goods_btn">
              <div class="goods_btn1">立即购买</div>
              <div class="goods_btn2">加入购物车</div>
            </div>

            <input type="hidden" value="6" name="goods_id">
            <input type="hidden" value="2" name="single_standard">
        </div>

       

    </div>



    <div class="goods2">

        <div class="title color1">商品详情 | <a href="#">商品评论</a></div>

        <div class="content">

          <p>小米手机还不错的</p>
        </div>
       
    </div>

   
</div>




<div class="foot_line"></div>
<div class="foot2">
    <div class="nav">
        <div class="item"><a href="#"><a href="/">企业官网</a></a></div>
        <div class="item">|</div>
        <div class="item"><a href="#"><a href="/index/index/page1.html">企业简介</a></div>
        <div class="item">|</div>
        <div class="item"><a href="/index/index/brand.html">品牌展厅</a></div>
        <div class="item">|</div>
        <div class="item"><a href="/index/index/page2.html">企业文化</a></div>
        <div class="item">|</div>
        <div class="item"><a href="/index/index/page3.html">企业使命</a></div>
        <div class="item">|</div>
        <div class="item"><a href="#">联系我们</a></div>
        <div class="item">|</div>
        <div class="item"><a href="/shop/index/news.html">新闻中心</a></div>
        <div class="item">|</div>
        <div class="item"><a href="#">我们的映像</a></div>
    </div>
    <div class="copyright">沪ICP备14037785号　&copy; 版权所有 北京小米科技有限中心 保留所有权利</div>
</div>

<div class="right_nav">
    <div class="item">
        <a class="box" href="/index/cart/index.html">
            <div class="icon"><i class="iconfont icongouwuche"></i></div>
            <div class="title">购物车</div>
        </a>
    </div>
    <div class="item">
        <a class="box"  href="/index/user/index.html">
            <div class="icon"><i class="iconfont iconwo"></i></div>
            <div class="title">个人中心</div>
        </a>
    </div>
    <div class="item">
        <a class="box"  href="/index/user/collect.html">
            <div class="icon"><i class="iconfont iconshoucang"></i></div>
            <div class="title">我的收藏</div>
        </a>
    </div>
    <div class="item">
        <a class="box">
            <div class="icon"><i class="iconfont iconkefu"></i></div>
            <div class="title">人工客服</div>
        </a>
    </div>
</div>
<div class="goup">
    <div class="icon"><i class="icondingbu iconfont"></i></div>
</div>
<script>
    $(function() { 

        $(window).scroll(function() { 

            if ($(window).scrollTop() > 700) $('div.goup').show(); 

            else

            $('div.goup').hide();

        }); 

            $('div.goup').click(function() { $('html, body').animate({scrollTop: 0}, 1000);

        });

    });


</script>


<script type="text/javascript">

var goods_id=$("input[ name='goods_id' ]").val();
var single_standard=$("input[ name='single_standard' ]").val();

//页面加载请求价钱
if(single_standard==2){
     var standard_value_id='';//存放选中属性的字符串，每次点击清空，重新获取

    $('.current input').each(function(k,v){ 
      if(k==0){
        standard_value_id=$(this).val();
      } else{
        standard_value_id=standard_value_id+','+$(this).val();
      }       
      
      
    });

    url ="/index/goods/getPriceBySku";
    postData = {'standard_value_id':standard_value_id,'goods_id':goods_id};

    $.post(url,postData,function(result){
      if(result.status==0){
        $(".goods_btn").css('display','none');
      }
      if(result.status==1){
        $(".goods_price1_text").html(result.goods_price);
        $(".goods_price2_text").html(result.market_price);
      }

    },'json');
}


$(".goods_attr_value_box .item").click(function(){

    //选择哪个哪个变红

    $(this).parent().children().removeClass("current");

    $(this).addClass("current");


    var standard_value_id='';//存放选中属性的字符串，每次点击清空，重新获取

    $('.current input').each(function(k,v){ 
      if(k==0){
        standard_value_id=$(this).val();
      } else{
        standard_value_id=standard_value_id+','+$(this).val();
      }       
      
      
    });

    url ="/index/goods/getPriceBySku";
    postData = {'standard_value_id':standard_value_id,'goods_id':goods_id};

    $.post(url,postData,function(result){
      if(result.status==0){
        $(".goods_btn").css('display','none');
      }
      if(result.status==1){
        $(".goods_price1_text").html(result.goods_price);
        $(".goods_price2_text").html(result.market_price);
      }

    },'json');

  
  });


  //加入购物车
  $(".goods_btn2").click(function(){

    var amount=$(".number_input").val();

    var standard_value_id='';//存放选中属性的字符串，每次点击清空，重新获取

    $('.current input').each(function(k,v){ 
      if(k==0){
        standard_value_id=$(this).val();
      } else{
        standard_value_id=standard_value_id+','+$(this).val();
      }       
      
      
    });


    url ="/index/cart/add_to_cart";

    postData = {'amount':amount,'goods_id':goods_id,'standard_value_id':standard_value_id};

    //发送请求

    $.post(url,postData,function(result){


      if(result.status == 1) {


          layui.use('layer', function(){

            layer.alert('加入购物车成功！', function(index){

              location.href="/index/cart/index";

            }); 

          });



      }

      if(result.status == -1) {

        layui.use('layer', function(){

          layer.alert('请先登录！', function(index){

            location.href="/index/user/login";

          }); 

        });

    }


    if(result.status== 0) {


      layui.use('layer', function(){

        var layer = layui.layer;

        layer.msg('加入购物车失败！');

      });



    }


  }, 'json');


  });




  //加入收藏操作
  function collect() {
    
  
    //抛送数据
    postData = {'goods_id':goods_id};
    url='/index/user/add_goods_collect';
    $.post(url,postData,function(result){
        
        //添加收藏
        if(result.status==1){
          $(".goods_price_box_right .layui-icon").attr('class','layui-icon-star-fill layui-icon');
        }

        //取消收藏
        if(result.status==2){
          $(".goods_price_box_right .layui-icon").attr('class','layui-icon-star layui-icon');
        }

        //服务异常
        if(result.status==-1){
          layui.use('layer', function(){
            var layer = layui.layer;
            
            layer.msg('服务端异常');
          }); 
        }

        //没有登录
        if(result.status==0){
          
          layui.use('layer', function(){
            var layer = layui.layer;
            
            layer.open({
                type: 1
                ,offset: 'auto' 
                ,id: 'layerDemo'+1 //防止重复弹出
                ,content: '<div style="text-align:center;padding:20px 80px">请登录！</div>'
                ,btn: '确定'
                ,btnAlign: 'c' //按钮居中
                ,shade: 0 //不显示遮罩
                ,yes: function(){
                    window.location.href='/index/user/login';
                }
            });
          });  
        }


      
    },'json');
  }
  
  </script>


</body>

</html>



